<template>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column prop="deviceID" label="DeviceID" width="100" />
		<el-table-column prop="name" label="Name" width="100" />
		<el-table-column prop="status" label="status" width="100" color="green"/>

		<el-table-column fixed="right" label="other" width="80">
			<template #default="scope">
				<el-button
					link
					type="primary"
					size="small"
					@click.prevent="getDetail(scope.$index)"
				>
					Detail
				</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>
<script>
export default {
	data(){
		return{
			tableData : [
				{
					deviceID:'0001',
					name: 'dianji1',
					status: 'working'
				}
			],
			device:[]
		}
	},
	methods:{
		getDetail(index){
			//console.log(index)
			let id = this.tableData[index].deviceID
			let name = this.tableData[index].name
			//console.log(id,name)
			this.$store.commit("setDeviceName",{DeviceID:id,DeviceName:name})
			this.$router.push({
				name: 'DeviceDetail', query: {
					deviceID: id,
					deviceName: name
				}
			})
		}
	},
	mounted() {
		console.log("ShowDeviceStatus-mounted")
		let LineID;
		//从路由取出当前产线名称和ID
		if(this.$route.query.LineID){
			LineID = this.$route.query.LineID;
		}
		else{
			LineID = this.$store.state.currentPage.LineID
		}
		//console.log(LineID,LineName)
		let status = '';
		let Lines = this.$store.state.productionLine		//所有产线
		// console.log('Lines:',Lines)
		//按照产线ID，将本产线筛选出来
		let Devices = Lines.filter((item)=>{
			if(item.id === LineID){
				// console.log(item)
				// console.log('found')
				status = 'found'
				return true
			}
		})
		if(status !== ''){
			//console.log(Devices)
			this.device = Devices 				//本产线所有数据
			//console.log(Devices[0].devices)
			this.tableData = Devices[0].devices 	//本产线所有设备数据
			let data = Devices[0].devices
			this.$store.commit("setDevices",data)	//将所有设备数据保存到vuex当前设备数据里，以便后面筛选出各设备的数据
			//console.log(Devices[0].devices[0].data)	//打印一下设备内部传感器数据
		}
		else{
			this.$router.push({name:'AllLine'})
		}
	}
}
</script>
